<template>
  <div class="container">
    <div class="cut"></div>
    <div class="bg-white">
      <div class="cut"></div>
      <div class="cut"></div>
      <el-row class="index-row1">
        <el-col :span="24" class="indexA-col1">
          <div class="chart-1">
            <div
              class="echart"
              id="mychart1"
              :style="{ float: 'left', width: '100%', height: '100%' }"
            ></div>
          </div>
        </el-col>
      </el-row>
      <el-divider>
        <el-icon><star-filled /></el-icon>
      </el-divider>
      <el-row class="index-row2">
        <el-col :span="12" class="indexA-col2">
          <div class="chart-2">
            <div
              class="echart"
              id="mychart2"
              :style="{ float: 'left', width: '100%', height: '100%' }"
            ></div>
          </div>
        </el-col>
        <el-col :span="12" class="indexA-col2">
          <div class="chart-3">
            <div
              class="echart"
              id="mychart3"
              :style="{ float: 'left', width: '100%', height: '100%' }"
            ></div>
          </div>
        </el-col>
      </el-row>
      <div class="cut"></div>
      <div class="cut"></div>
      <div class="cut"></div>
      <div class="cut"></div>
      <el-divider>
        <el-icon><star-filled /></el-icon>
      </el-divider>
    </div>
    <div class="cut"></div>
  </div>
</template>
<script>
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  TitleComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TooltipComponent,
  GridComponent,
  BarChart,
  TitleComponent,
  CanvasRenderer,
]);

export default {
  data() {
    return {};
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const optionA1 = {
        title: {
          text: "成长能力子指标权重图",
          textAlign: "auto",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "净资产增长率%",
              "营业收入增长率",
              "总资产增长率",
              "营业利润增长率",
              "净利润增长率",
            ],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "40px",
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            data: [0.07641532, 0.04780092, 0.0567092, 0.04868285, 0.0549864],
          },
        ],
      };
      const optionA2 = {
        title: {
          text: "有风险公司成长能力子指标均值",
          textAlign: "auto",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "净资产增长率%",
              "营业收入增长率",
              "总资产增长率",
              "营业利润增长率",
              "净利润增长率",
            ],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
              interval: 0,
              formatter: function (value) {
                return value.split("").join("\n");
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "40px",
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            data: [
              -3.499739803, -0.24718262, -0.215287718, -6.002341239,
              -8.34458162,
            ],
          },
        ],
      };
      const optionA3 = {
        title: {
          text: "无风险公司成长能力子指标均值",
          textAlign: "auto",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "净资产增长率%",
              "营业收入增长率",
              "总资产增长率",
              "营业利润增长率",
              "净利润增长率",
            ],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
              interval: 0,
              formatter: function (value) {
                return value.split("").join("\n");
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "40px",
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            data: [
              0.100311157, 0.108810707, 0.101515617, -0.388231912, -122.9043019,
            ],
          },
        ],
      };

      const myChart1 = echarts.init(document.getElementById("mychart1")); // 图标初始化
      const myChart2 = echarts.init(document.getElementById("mychart2")); // 图标初始化
      const myChart3 = echarts.init(document.getElementById("mychart3")); // 图标初始化
      myChart1.setOption(optionA1); // 渲染页面
      myChart2.setOption(optionA2); // 渲染页面
      myChart3.setOption(optionA3); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
      });
    },
  },
};
</script>
<style>
.intro {
  color: #ffffff;
  font-size: 20px;
}
.bg-white {
  padding: 20px 0;
  background-color: #fff;
}
.index-row1 {
  height: 400px;
}
.index-row2 {
  height: 400px;
}
.indexA-col2 {
  text-align: center;
}
.indexA-col1 {
  padding-left: 15%;
  text-align: center;
}
.chart-1 {
  height: 400px;
  width: 800px;
}
.el-divider {
  border-color: #409eff;
}
.el-divider .el-icon {
  color: #409eff;
}
.chart-2 {
  margin-top: 20px;
  height: 400px;
  width: 100%;
}
.chart-3 {
  margin-top: 20px;
  height: 400px;
  width: 100%;
  border-left: 1px solid #409eff;
}
</style>
